<template>
  <div class="big">
    <div class="top">
      <img
        src="https://thirdwx.qlogo.cn/mmopen/vi_32/TLqDcR4ZmgGwlAVOL6iatmiccy7iaYu7CcJa78E6ib3booSWAIXWOq5WIcTZ76yhHen44w2UkGdibNwdzphfnvaTS2w/132"
        alt=""
        class="head"
      />
      <span class="span">5t5老婆(ID:3765738)</span>
    </div>
    <div class="one">
      <p class="p">娃娃精品课会员</p>
      <span class="no">未开通 ></span>
    </div>
    <div class="two">
      <dl>
        <dt>
          <img
            src="http://img.wawachina.cn/xcx/images/n_r_5.jpg"
            alt=""
            class="imgs1"
          />
        </dt>
        <dd>
          <span>我的孩子</span>
        </dd>
      </dl>
      <dl>
        <dt>
          <img
            src="http://img.wawachina.cn/xcx/images/czj_1.png"
            alt=""
            class="imgs2"
          />
        </dt>
        <dd>
          <span>成长记</span>
        </dd>
      </dl>
       <dl>
        <dt>
         <img src="http://img.wawachina.cn/xcx/images/n_r_2.jpg" alt="" class="imgs3">
        </dt>
        <dd>
          <span>我的收藏</span>
        </dd>
      </dl>
       <dl>
        <dt>
         <img src="http://img.wawachina.cn/xcx/images/gywm.png" alt="" class="imgs4">
        </dt>
        <dd>
          <span>关于我们</span>
        </dd>

      </dl>
    </div>
    <div class="three">
      <button class="btn">重新登录</button>
    </div>
    <div class="four">
      <img src="http://img.wawachina.cn/xcx/livecast/anchor/1604297659270.png" alt="" class="other"  @click="bindViewTab">
      <span class="dian"></span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  onLoad() {},
  methods: {
    bindViewTab:function(){
    wx.navigateTo({    //保留当前页面，跳转到应用内的某个页面（最多打开5个页面，之后按钮就没有响应的）

         url:"/pages/detail/mydetail"

    })
  }
}
}
</script>

<style>
.big {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: rgba(245, 245, 245);
}
.top {
  width: 100%;
  height: 130px;
  display: flex;
  position: relative;
  /* background-color: rgb(238, 91, 81); */
  background-image: url(http://img.wawachina.cn/xcx/images/c_h_bg.jpg);
  background-size: 100%;
}
.head {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: 30px;
  margin-top: 30px;
}
.span {
  font-size: 14px;
  margin-top: 33px;
  margin-left: 10px;
  color: #fff;
}
.one {
  width: 92%;
  height: 55px;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  border-radius: 10px;
  margin: 0 auto;
  position: absolute;
  top: 105px;
  line-height: 55px;
  left: 16px;
}
.p {
  color: rgb(244, 98, 61);
  padding-left: 10px;
  font-size: 15px;
}
.no {
  color: rgb(136, 136, 136);
  font-size: 14px;
  padding-right: 10px;
}
.two {
  width: 100%;
  height: 90px;
  display: flex;
  justify-content: space-around;
  margin-top: 52px;
  background-color: #fff;
}
dl {
  width: 50px;
  margin-top: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
dt {
  width: 30px;
  height: 30px;
  margin: 0 auto;
}
.imgs1 {
  width: 25px;
  height: 25px;
}
.imgs2 {
   width: 25px;
  height: 25px;
}
.imgs3 {
   width: 25px;
  height: 25px;
}
.imgs4 {
  width: 25px;
  height: 25px;
}
dd {
  display: flex;
  justify-content: space-around;
  margin-top: 6px;
  text-align: center;
  font-size: 12px;
}

.three {
  width: 100%;
  height: 110px;
}
.btn {
  width: 182px;
  height: 45px;
  background-color: rgb(245, 101, 101);
  align-items: center;
  color: #fff;
  margin-top: 35px;
  border-radius: 25px;
  font-size: 16px;
  text-align: center;
  line-height: 45px;
}
.four {
  width: 100%;
  height: 175px;
  background-color: palegoldenrod;
  position: relative;
}
.other{
  width: 100%;
  height: 175px;
}
.dian{
  width: 8px;
  height: 8px;
  background-color: black;
  border-radius: 50%;
  position: absolute;
  top: 90%;
  left: 50%;
}
</style>
